import { CaseConfigType } from '@shared';
import { Demo1Component } from './demo1/demo1.component';
import { PositionComponent } from './position/position.component';
import { Demo3Component } from './demo3/demo3.component';
import { Demo4Component } from './demo4/demo4.component';
import { TriggerComponent } from './trigger/trigger.component';
import { Demo6Component } from './demo6/demo6.component';
import { Demo7Component } from './demo7/demo7.component';
import { Demo8Component } from './demo8/demo8.component';
import { SpecifyMountTargetComponent } from './specify-mount-target/specify-mount-target.component';

export const TooltipConfig: CaseConfigType = {
  location: 'Tooltip',
  description: '简单的文字提示气泡框， 用来通知用户非关键性问题或提示某控件处于某特殊情况。',
  description_en: `A simple text prompt bubble box, used to notify users of non-critical issues or prompt that a control is in a special situation.`,
  component: [
    {
      demo: Demo1Component,
      codePath: 'showcase/tooltip/demo1/demo1.component',
      demoTitle: '基础使用',
      demoTitle_en: 'Basic Use',
      demoDescription: `最简单的用法。支持组件、指令调用两种方式。注意：挂载 lvTooltip 的元素为 disable 状态或设置了 pointer-events: none，则使用组件方式引用。`,
      demoDescription_en: `Simplest usage. It supports two methods of component and instruction invocation. Note: The element that mounts the lvTooltip is in the disabled state or pointer-events: none is set, and the component reference is used.`,
    },
    {
      demo: PositionComponent,
      codePath: 'showcase/tooltip/position/position.component',
      demoTitle: '位置',
      demoTitle_en: 'Position',
      demoDescription: '位置提供12个方向。',
      demoDescription_en: 'Position provides 12 directions.',
    },
    {
      demo: TriggerComponent,
      codePath: 'showcase/tooltip/trigger/trigger.component',
      demoTitle: '触发方式',
      demoTitle_en: 'Trigger method',
      demoDescription: '提供了4种触发，鼠标移入（默认）、点击、聚焦和自定义。',
      demoDescription_en: 'Four triggers are provided, mouse in (default), click, focus and custom.',
    },
    {
      demo: Demo6Component,
      codePath: 'showcase/tooltip/demo6/demo6.component',
      demoTitle: '自定义显示隐藏',
      demoTitle_en: 'Customize',
      demoDescription: '配置 lvTooltipTrigger = `customize`，使用 lvTooltipVisible 控制 tooltip 是否显示。',
      demoDescription_en: 'Configure lvTooltipTrigger = `customize` and use lvTooltipVisible to control whether the tooltip is displayed.',
    },
    {
      demo: Demo7Component,
      codePath: 'showcase/tooltip/demo7/demo7.component',
      demoTitle: '模板渲染',
      demoTitle_en: 'Template Render',
      demoDescription: `lv-tooltip 传入 TemplateRef<any> 模板渲染。`,
      demoDescription_en: `Pass in the TemplateRef<any> template rendering.`,
    },
    {
      demo: Demo3Component,
      codePath: 'showcase/tooltip/demo3/demo3.component',
      demoTitle: '带图标',
      demoTitle_en: 'With Icons',
      demoDescription: '内容包含图标。',
      demoDescription_en: 'Contents contain icons.',
    },
    {
      demo: Demo4Component,
      codePath: 'showcase/tooltip/demo4/demo4.component',
      demoTitle: '主题',
      demoTitle_en: 'Theme',
      demoDescription: '有深色和浅色两个主题。默认为浅色主题，深色主题：dark。',
      demoDescription_en: 'There are two themes in dark and light colors. The default is a light theme.',
      devDebug: true,
    },
    {
      demo: Demo8Component,
      codePath: 'showcase/tooltip/demo8/demo8.component',
      demoTitle: '自定义样式',
      demoTitle_en: 'Custom style',
      demoDescription: '自定义提示信息样式。',
      demoDescription_en: 'Custom tooltip style.',
      devDebug: true,
    },
    {
      demo: SpecifyMountTargetComponent,
      codePath: 'showcase/tooltip/specify-mount-target/specify-mount-target.component',
      demoTitle: '指定挂载目标',
      demoTitle_en: 'Specify mount target',
      demoDescription: '通过 lvTooltipOrigin 指定 tooltip 的挂载元素。',
      demoDescription_en: 'Specify the mount element of the tooltip through lvTooltipOrigin.',
    },
  ],
  useRule: [
    `用来通知用户非关键性问题或提示某控件处于某特殊情况。带箭头tips主要用于有明确指向的提示，如文本输入、问号提示、值的说明、在tips中需增加链接的提示等。不带箭头tips主要用于无须有明确指向的提
  示，如图表等。带箭头的tips包括问号提示、表格中的tips提示、交互属性的tips、下拉选项的tips、其他辅助类tips等。`,
  ],
  useRule_en: [
    `Used to notify the user of a non-critical problem or to indicate that a control is in a special situation. Tips with arrows are mainly used for prompts with clear directions, such as text input, question mark prompts, descriptions of values, and prompts for adding links in tips. Tips without arrows are mainly used for mentioning without a clear point.
  shown, such as charts, etc. Tips with arrows include question mark tips, tips tips in tables, tips of interactive properties, tips of drop-down options, tips of other auxiliary classes, etc. `,
  ],
  useSuggestion: ['请确保挂载 lvTooltip 的元素能接受 onMouseEnter、onMouseLeave、onFocus、onClick 事件。'],
  useSuggestion_en: ['Make sure that elements carried with lvTooltip can accept onMouseEnter, onMouseLeave, onFocus, onClick events.'],
  mApi: [
    {
      name: '组件方式',
      name_en: 'Component Mode',
      api: [
        {
          attribute: 'lvContent',
          type: 'string | TemplateRef',
          default: '-',
          description: `提示内容。`,
          description_en: `Content of tips.`,
        },
        {
          attribute: 'lvIcon',
          type: 'string',
          default: '-',
          description: `提示内容图标。`,
          description_en: `Content icons of tips.`,
        },
        {
          attribute: 'lvZIndex',
          type: 'number',
          default: '-',
          description: `层级。`,
          description_en: `Levels.`,
        },
        {
          attribute: 'lvTheme',
          type: 'string',
          default: 'light',
          description: `提示框主题，可选值为 ('dark' | 'light')。`,
          description_en: `Theme of the tipbox. Value: ('dark' | 'light').`,
          global: true,
        },
        {
          attribute: 'lvTrigger',
          type: 'string',
          default: 'hover',
          description: `触发行为，可选值为 ('hover' | 'focus' | 'click' | 'customize')。`,
          description_en: `Triggering behavior. Value: ('hover' | 'focus' | 'click' | 'customize').`,
        },
        {
          attribute: 'lvPosition',
          type: 'PositionType',
          default: 'top',
          description: `提示框位置，可选值为 ('top' | 'topLeft' | 'topRight' | 'right' | 'rightTop' | 'rightBottom' | 'bottom' | 'bottomLeft' | 'bottomRight' | 'left' | 'leftTop' | 'leftBottom')。`,
          description_en: `Tip box position, . Value: ('top' | 'topLeft' | 'topRight' | 'right' | 'rightTop' | 'rightBottom' | 'bottom' | 'bottomLeft' | 'bottomRight' | 'left' | 'leftTop' | 'leftBottom').`,
        },
        {
          attribute: 'lvScrollToClose',
          type: 'boolean | { exclusions: HTMLElement[] }',
          default: 'true',
          description: `滚动时隐藏tooltip的排除元素。默认为true排除tooltip origin和tooltip pane。为false时不排除任何元素。`,
          description_en: `Hides the exclusion element of the tooltip when scrolling. The default value is true, excluding tooltip origin and tooltip pane. When false, no element is excluded.`,
        },
        {
          attribute: 'lvClassName',
          type: 'string',
          default: '-',
          description: `tooltip类名。`,
          description_en: `Tooltip class name.`,
        },
        {
          attribute: 'lvVisible',
          type: 'boolean',
          default: 'true',
          description: `控制tooltip是否显示。lvTrigger为customize时才生效。`,
          description_en: `Visibility of tips only effective when lvTrigger = 'customize'.`,
        },
        {
          attribute: 'lvShowArrow',
          type: 'boolean',
          default: 'true',
          description: `控制tooltip内容区域小三角是否显示。`,
          description_en: `Controls whether the tooltip content area small triangle is displayed.`,
        },
        {
          attribute: 'lvArrowPointAtCenter',
          type: 'boolean',
          default: 'false',
          description: `小三角是否指向目标元素中心。`,
          description_en: `Indicates whether the small triangle points to the center of the target element.`,
        },
        {
          attribute: 'lvOrigin',
          type: 'ElementRef',
          default: 'Tooltip.ElementRef',
          description: `指定tooltip挂载的源`,
          description_en: ``,
        },
        {
          attribute: 'lvOuterClosable',
          type: 'boolean | { exclusions: HTMLElement[] }',
          default: 'true',
          description: `在消息外部点击时是否关闭。`,
          description_en: `Whether to close the dialog when clicking outside the tooltip.`,
        },
        {
          attribute: 'lvContextData',
          type: 'number | string | boolean | Array<any> | { [key: string]: any }',
          default: '-',
          description: `提示内容模板上下文数据。`,
          description_en: `Tooltip content template context data.`,
        },
      ],
      event: [],
    },
    {
      name: '指令方式',
      name_en: 'Instruction Mode',
      selector: 'lv-tooltip',
      snippet: `<span lv-tooltip="\${1:This tooltip is dark theme}">\${2:This tooltip is dark theme}</span>`,
      api: [
        {
          attribute: 'lv-tooltip',
          type: 'string | TemplateRef',
          default: '-',
          description: `提示内容。`,
          description_en: `Content of tips.`,
        },
        {
          attribute: 'lvTooltipIcon',
          type: 'string',
          default: '-',
          description: `提示内容图标。`,
          description_en: `Content icons of tips.`,
        },
        {
          attribute: 'lvTooltipZIndex',
          type: 'number',
          default: '-',
          description: `层级。`,
          description_en: `Levels.`,
        },
        {
          attribute: 'lvTooltipTheme',
          type: 'string',
          default: 'light',
          description: `提示框主题，可选值为 ('dark' | 'light')。`,
          description_en: `Theme of the tipbox. Value: ('dark' | 'light').`,
        },
        {
          attribute: 'lvTooltipTrigger',
          type: 'string',
          default: 'hover',
          description: `触发行为，可选值为 ('hover' | 'focus' | 'click' | 'customize')。`,
          description_en: `Triggering behavior. Value: ('hover' | 'focus' | 'click' | 'customize').`,
        },
        {
          attribute: 'lvTooltipPosition',
          type: 'string',
          default: 'top',
          description: `提示框位置，可选值为 ('top' | 'topLeft' | 'topRight' | 'right' | 'rightTop' | 'rightBottom' | 'bottom' | 'bottomLeft' | 'bottomRight' | 'left' | 'leftTop' | 'leftBottom')。`,
          description_en: `Position of tipbox. Value: ('top' | 'topLeft' | 'topRight' | 'right' | 'rightTop' | 'rightBottom' | 'bottom' | 'bottomLeft' | 'bottomRight' | 'left' | 'leftTop' | 'leftBottom').`,
        },
        {
          attribute: 'lvTooltipScrollToClose',
          type: 'boolean | { exclusions: HTMLElement[] }',
          default: 'true',
          description: `滚动时隐藏tooltip的排除元素。默认为true排除tooltip origin和tooltip pane。为false时不排除任何元素。`,
          description_en: `Hides the exclusion element of the tooltip when scrolling. The default value is true, excluding tooltip origin and tooltip pane. When false, no element is excluded.`,
        },
        {
          attribute: 'lvTooltipClassName',
          type: 'string',
          default: '-',
          description: `tooltip类名。`,
          description_en: `Tooltip class name.`,
        },
        {
          attribute: 'lvTooltipVisible',
          type: 'boolean',
          default: 'true',
          description: `控制tooltip是否显示。lvTooltipTrigger='customize'时才生效`,
          description_en: `Visibility of tips only effective when lvTrigger = 'customize'.`,
        },
        {
          attribute: 'lvTooltipShowArrow',
          type: 'boolean',
          default: 'true',
          description: `控制tooltip内容区域小三角是否显示。`,
          description_en: `Controls whether the tooltip content area small triangle is displayed.`,
        },
        {
          attribute: 'lvTooltipArrowPointAtCenter',
          type: 'boolean',
          default: 'false',
          description: `小三角是否指向目标元素中心。`,
          description_en: `Indicates whether the small triangle points to the center of the target element.`,
        },
        {
          attribute: 'lvTooltipOrigin',
          type: 'ElementRef',
          default: 'Tooltip.ElementRef',
          description: `指定tooltip挂载的源`,
          description_en: ``,
        },
        {
          attribute: 'lvTooltipOuterClosable',
          type: 'boolean | { exclusions: HTMLElement[] }',
          default: 'true',
          description: `在消息框外部点击时是否关闭。`,
          description_en: `Whether to close the dialog when clicking outside the tooltip.`,
        },
        {
          attribute: 'lvTooltipContextData',
          type: 'number | string | boolean | Array<any> | { [key: string]: any }',
          default: '-',
          description: `提示内容模板上下文数据。`,
          description_en: `Tooltip content template context data.`,
        },
      ],
      event: [],
    },
  ],
};
